<template>
  <div class="da">
    <h1>欢迎注册</h1>
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="修改密码"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-col>
    </el-row>
    <van-form>
      <van-field
        v-model="form.name"
        label="用户名"
        placeholder="请输入用户名"
        required
      />
      <van-field
        v-model="form.birth"
        label="生日"
        placeholder="请选择生日"
        required
        type="date"
        @confirm="formatDate()"
      />
      <van-field
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        required
      />
      <van-field
        v-model="form.password"
        label="密码"
        placeholder="请输入密码"
        required
      />
<!--      <van-field-->
<!--        v-model="form.verify"-->
<!--        label="验证码"-->
<!--        placeholder="请输入验证码"-->
<!--        required-->
<!--        :right-icon="sendCodeIcon"-->
<!--      >-->
<!--        <template #right-icon>-->
<!--          <van-button @click="yanzhengma()" size="small">发送验证码</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
      <van-button type="info" @click="cz()" block>注册</van-button>
    </van-form>

    <div style="margin-top: 110px;">
      <van-row type="flex" justify="space-around">
        <van-col @click="registerLogin()" span="6">已有账号返回登录页面</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Toast} from "vant";

export default {
  data() {
    return {
      form: {
        name: "",
        birth: "",
        phone: "",
        verify: "",
      },
      sendCodeIcon: 'send',
    };
  },
  methods: {
    registerLogin() {
      this.$router.push({ path: "/" });
    },
    yanzhengma() {
      this.phone = this.form.phone;
      axios.get(`/user/JWTTest/save?phone=${this.phone}`).then(res => {
        if (res.data.code== 1) {
          this.$message.success("发送成功");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    cz() {
      axios.post(`/user/user/save`, this.form).then(res => {
        if (res.data.code == 1) {
          this.$message.success("注册成功");
          this.$router.push({ path: "/" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      this.form.birth = `${year}-${month}-${day}`;
      console.log('选择的日期:', this.form.birth);
    },
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.push('/');
    },
  },
  created() {

  }
};
</script>

<style scoped>

.gender-field {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 8px;
}
</style>
